<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            background-color: #000;
        }
    </style>
</head>

<body>
    <canvas id="cvs"></canvas>
    <script>
        window.onload = function () {


            var R_init = 100
            var Sum = 360 / 10 //定义12个环形的圈圈
            var Sumy = 360 / 10 //纵向也有12个圈圈
            var radius = 2 //居中半径
            var r_add = 2 //半径增量
            var scen = 20 //视角长度
            var off = 200 //canvas偏移
            var R = 100 / (scen + R_init) * 200 //定义大圆半径，随着视角变大而变小

            /**
             *   获取canvas对象
             */
            var can = document.getElementById("cvs");
            can.width = window.innerWidth;
            can.height = window.innerHeight;
            var width = can.getAttribute("width")
            var height = can.getAttribute("height")
            var canvas = can.getContext("2d")
            // canvas.scale(1.2,1.2)
            canvas.lineWidth = 0.5;
            // canvas.scale(2, 2)
            /**
             *重写数组方法
             */
            Array.prototype.forEach = function (callback) {
                for (var i = 0; i < this.length; i++) {
                    callback.call(this[i])
                }
            }
            /**
             * 定义一个球体对象
             */
            var Cube = function (points) {
                this.points = points
            }
            Cube.prototype = {
                _draw: function () {
                    canvas.strokeStyle = "#ffa"
                    this.points.forEach(function () {
                        canvas.beginPath()
                        canvas.arc(this.x + off, this.y + off, this.radius, 0, 2 * Math.PI)
                        canvas.stroke()
                    })

                },
                transform: function (angleX, angleY) {
                    canvas.clearRect(0, 0, width, height)
                    rotateY(this.points, angleY)
                    rotateX(this.points, angleX)
                    this._draw()
                },
                transformX: function (angleZ) {
                    canvas.clearRect(0, 0, 4000, 3000)
                    rotateX(this.points, angleZ)
                    this._draw()
                },
                transformY: function (angleZ) {
                    canvas.clearRect(0, 0, 1000, 1000)
                    rotateY(this.points, angleZ)
                    this._draw()
                },
                _print: function () {
                    console.log(this.points.length)
                },
                _resizeCamera: function () {
                    //重置视角,重置坐标点,没写完

                }
            }

            /**
             *  定义一些圆圈
             */
            var point = function (x, y, z, radius) {
                this.x = x
                this.y = y
                this.z = z
                this.radius = radius
                this.changeZ = function () {
                    this.z = 0 - this.z
                    this.radius = radius + r_add * Math.sqrt(Math.pow(R + scen - this.z, 2) + Math.pow(this
                        .y, 2)) / (scen + R)
                    return this
                }
            }
            //初始化球上面的圆圈
            function init() {
                var points = []
                for (var i = 0; i < Sum; i++) { //横坐标方向 12个 1
                    for (var e = 0; e < Sumy; e++) { //纵坐标方向 12个 1
                        var x = Math.cos(i * Math.PI * 2 / Sum) * Math.sin(e * Math.PI * 2 / Sumy) * R
                        var y = Math.cos(e * Math.PI * 2 / Sumy) * R
                        var z = 0
                        if ((e / Sumy > .5) || (i / Sum) > .5) {
                            z = 0 - Math.sqrt(Math.pow(R, 2) - Math.pow(x, 2) - Math.pow(y, 2))
                        } else {
                            z = Math.sqrt(Math.pow(R, 2) - Math.pow(x, 2) - Math.pow(y, 2))
                        }
                        var r = radius + r_add * Math.sqrt(Math.pow(R + scen - z, 2) + Math.pow(y, 2)) / (scen + R)
                        console.log(x, y, z, r)
                        var p = new point(x, y, z, r)
                        points.push(p)
                    }
                }
                return points
            }
            //沿着Z轴旋转
            function rotateZ(points, angleY) {
                var cos = Math.cos(angleY)
                var sin = Math.sin(angleY)
                points.forEach(function () {
                    var x1 = this.x * cos - this.y * sin
                    var y1 = this.y * cos + this.x * sin
                    this.x = x1
                    this.y = y1
                })
            }

            function rotateX(points, angleY) {
                var cos = Math.cos(angleY)
                var sin = Math.sin(angleY)
                points.forEach(function () {
                    var y1 = this.y * cos - this.z * sin
                    var z1 = this.y * sin + this.z * cos
                    this.y = y1
                    this.z = z1
                })
            }

            function rotateY(points, angleY) {
                var cos = Math.cos(angleY)
                var sin = Math.sin(angleY)
                points.forEach(function () {
                    var z1 = this.z * cos - this.x * sin
                    var x1 = this.z * sin + this.x * cos
                    this.z = z1
                    this.x = x1
                })
            }
            var pos = init()
            var c = new Cube(pos)
            //c._clone()
            c._draw()

            //鼠标事件,有点问题

            var x_ = 1000
            var y_ = 1000
            window.onmousemove = function (e) {
                var rx = e.pageX
                var ry = e.pageY
                var deltaX = rx - x_
                var deltaY = ry - y_
                c.transform(deltaY / 8000 * Math.PI, -deltaX / 8000 * Math.PI)
                x_ = rx
                y_ = ry


            }
        }
    </script>
</body>

</html>